*{
  margin:0%;
  padding:0%;
  box-sizing: border-box;
}

html,body{
background-color: black;
  height: 100%;
  width:100%;
 
}





h4{

  color:goldenrod;
  font-size: 15px;
}

.logo{


  width:100%;
  display: flex;
}

nav{
  background-color: rgb(55, 83, 83);
  
  }

  
.anim-cont{

  height:30%;
  width:100%;
  text-align: center;
  position: relative;
  padding-top: 20px;
  color:rgba(241, 249, 10, 0.767);
  
  }

  
ul{

  background-color: whitesmoke;
}
a{
margin-left: 30px;
font-family:𝐇𝐎𝐌𝐄;
font-size: 20px;
}

a:hover{

  transform: scale(1.1,1.1);
}

span{

  color: bisque;
  text-align: center;
}


.d1{
  color:black;
   height: 50%;
   width:100%;

   background-color: grey;
   display: flex;
}

.d1:hover{

   transform: translatey(-10%);
   backdrop-filter: blur("90%");
}
.box1{

   height: 100%;
   width: 40%;
   background-size: cover;
}

.box2{
   height: 100%;
   width:60%;
   padding: 10px;

}

.d2{
  height: 100%;
  width: 100%;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

button{
  padding:10px;
  border:none;
  background-color: rgb(189, 118, 66);
  color:beige;
 
}

button:hover{

  background-color: rgb(9, 62, 32);
  color: bisque;
}

.brand-name{
  color: bisque;
  text-align: center;

  background-color: black;

  }